<template>
  <div class="produce">
    <!-- <department-selected
      :selectedDepartment="curDepartment"
      @department_selected="departmentSelected"
    ></department-selected> -->
    <div class="product-header">
      <div class="product-header-inner">
        <!-- <img class="company-logo" src="../../../styles/logo.svg" alt=""> -->
        <!-- <iconSvg name="g6change" w="25" style="color:#fff" @click.native="backToG6page('g6')"></iconSvg> -->
        <div class="product-header-content">
          <div class="department_select" :class="showTree?'active': ''" @click="showTreeFn(true)">
            <p class="department_name">{{curDepartment.departmentName}}</p>
            <iconSvg name="downFill" w="23px" height="13px" class="selece_icon" ref="selece_icon"></iconSvg>
          </div>
          <transition name="slide">
            <div class="dep_box" v-show="showTree">
              <dep-tree @changeId="change" @showTreeFn="showTreeFn" @initCurDepartment="initCurDepartment" :initDepartment="curDepartment"></dep-tree>
            </div>
          </transition>
          <div v-if="showTree" @click="showTreeFn(false)"  style="position: fixed;top: 0;left:0; width: 100vw;height: 100vh; z-index: 9"></div>
        </div>
        <div @click="backToHomepage" v-focusable><iconSvg name="home" w="20px" h="22px" class="home"></iconSvg></div>
      </div>
    </div>
    <Application></Application>
    <div class="produce-tab">
      <div class="produce-tab-item" @click="handler(1)" :class="statusIndex===1 ? 'active' : ''"><span>生产统计</span><div class="line"></div></div>
      <div class="produce-tab-item" @click="handler(2)" :class="statusIndex===2 ? 'active' : ''"><span>生产数据</span><div class="line"></div></div>
      <div class="produce-tab-item" @click="handler(3)" :class="statusIndex===3 ? 'active' : ''"><span>生产日报</span><div class="line"></div></div>
    </div>
    <div class="produce-add">
      <!-- <div class="add-btn" @click="handleAdd(1)">
        自动填报
      </div> -->
      <div class="add-btn" @click="handleAdd(0)">
        添加
      </div>
    </div>
    <div class="produce-data-list">
      <div
        class="item"
        v-for="(item,index) in produceDataList"
        :key="index"
        @click="handleDetail(item)"
      >
        <div class="top">
          <span>{{item.departmentName}}</span>
          <span>/{{item.orgJobShiftName}}({{item.fillTime}})</span>
        </div>
        <div class="bottom">
          提交人：{{item.userName}}
        </div>
        <div class="status" :class="item.status === 1 ? 'draft' : 'submitted'">{{item.statusStr}}</div>
      </div>
      <div class="item no-data" v-if="produceDataList.length === 0">
        --暂无数据--
      </div>
    </div>
    <div class="more" v-if="showMore" @click="getMore">查看更多</div>
  </div>
</template>

<script>
import DepartmentSelected from "../../common/department-selected";
import ProduceDataDao from '@/daos/produce_data_dao';
import Application from "@/components/common/application";
import depTree from '@/components/common/tree';
import Common from '@/config/commom'
// import { Tab, TabItem } from 'vux'
const defaultFilterCache = {
  curDepartment: {},
  deviceTypeId: null,
};
export default {
  name: 'produceData',
  data () {
    return {
      addStore: null,
      statusIndex: 2,
      produceDataList: [],
      depId: '',
      depName: '',
      showMore: false,
      pageNum: 1,
      pageSize: 10,
      showTree: false,
      curDepartment: {
        id: '',
        departmentName: ''
      },
      store:{
        pageNum: 0,
      },
      departmentId: ''
    }
  },

  components: {
    DepartmentSelected,
    Application,
    depTree
    // Tab,
    // TabItem
  },
  inject: ["backToHomepage",'backToG6page'],

  computed: {},

  beforeRouteEnter (to, from, next) {
    let producePage = localStorage.getItem("producePage");
    if (producePage && producePage !== to.name) {
      next({ name: producePage, query:to.query })
    }else{
      next()
    }
  },

  activated() {
    this.addStore = JSON.parse(localStorage.getItem("addProduceData"))
    if (this.store.pageNum) {
      this.getData(this.store.pageNum)
    } else {
      this.clearStore(this.produceDataList)
    }
  },
  mounted() {
    let filterCache = Common.getFilterCache();
    if (filterCache) {
      if (filterCache.produceData) {
        this.curDepartment = filterCache.produceData;
      }
    }
    this.getData()
  },
  methods: {
    getData(pageNum){
      this.$vux.loading.show({
        text: 'Loading'
      })
      ProduceDataDao.getProduceList({
        departmentId: this.departmentId,
        pageNum,
        pageSize: this.pageSize
      },(res)=>{
        this.$vux.loading.hide()
        if (pageNum === 1) {
          this.produceDataList.splice(0, this.produceDataList.length)
        }
        if (res.content && res.content.length) {
          // this.produceDataList.push(...res.content);
          this.produceDataList.splice(
            (pageNum - 1) * this.pageSize,
            this.pageSize,
            ...res.content
          );
        }
        this.showMore = res.total > this.produceDataList.length
        this.clearStore(res.content)
      },()=>{
        this.$vux.loading.hide()
      })
    },
    clearStore(arr){
      arr.forEach(element => {
        if (element.status === 2) {
          localStorage.removeItem("ProduceData"+element.id)
        }
        if (this.addStore&&element.fillTime === this.addStore.fillTime&&element.orgJobShiftId === this.addStore.orgJobShiftId) {
          localStorage.removeItem("addProduceData")
        }
      });
    },
    departmentSelected(params) {
      this.depId = params.department.id
      this.depName = params.department.departmentName
      this.needClearChart = true;
      this.curDepartment = params.department;
      this.lineChartOptions = {};
      if (
        !this.loading &&
        (!this.lineChartOptions ||
          !this.lineChartOptions.times ||
          this.lineChartOptions.times.length <= 0)
      ) {
        this.loading = true;
      }
      if (this.chartType !== 1) {
        this.getData(this.pageNum);
      }
    },
    handler(value){
      if(value === 1){
        this.saveProducePage('produce')
        this.$router.push({
          name:'produce',
          query:this.$route.query
        })
      }
      if (value === 3) {
        this.$router.push({
          path:'/produceDaily',
          name:'produceDaily',
          query:this.$route.query
        })
      }
    },
    saveProducePage(page) {
        localStorage.setItem("producePage",page);
    },
    getProducePage(page) {
        let producePage = localStorage.getItem("producePage");
        return producePage;
    },
    handleAdd(auto){
      this.store.pageNum = 0
      this.$router.push({
        path:'/produceData/add',
        query:{
          auto
        }
      })
    },
    handleDetail(data){
      const index = this.produceDataList.findIndex(e => e.id === data.id);
      this.store.pageNum  = Math.ceil((index + 1) / 10)
      console.log(this.store.pageNum);
      if(data.status === 2){
        this.$router.push({
          path:'/produceData/edit',
          query:{
            id: data.id,
            see: data.id
          }
        })
      }else{
        this.$router.push({
          path:'/produceData/edit',
          query:{
            id: data.id
          }
        })
      }
    },
    getMore(){
      this.pageNum  = this.pageNum + 1
      this.getData(this.pageNum);
    },
    change(id, departmentName) {
      this.curDepartment.id = id
      this.departmentId = id
      this.curDepartment.departmentName = departmentName

      let filterCache = JSON.parse(localStorage.getItem("filterCache"));
      filterCache.produceData = this.curDepartment;
      localStorage.setItem("filterCache",JSON.stringify(filterCache));
      this.pageNum = 1
      this.getData(this.pageNum);
    },
    showTreeFn(status) {
      if (status) {
        this.$refs.selece_icon.$el.style.transform = 'rotate(-180deg)'
      } else {
        this.$refs.selece_icon.$el.style.transform = 'rotate(0deg)'
      }
      this.showTree = status
    },
    initCurDepartment(id, departmentName) {
      let filterCache = Common.getFilterCache();
      if (filterCache && !filterCache.produceData) {
        this.curDepartment = {
          departmentName,
          id
        };
        filterCache.produceData = this.curDepartment;
        Common.saveFilterObj(filterCache);
      }
      this.curDepartment = {
        departmentName,
        id
      };
    }
  }
}

</script>
<style lang="less" scoped>
.product-header {
  // position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 42px;
  background: #03061C;
  font-size: 16px;
  .product-header-inner {
    display: flex;
    padding-right: 20px;
    padding-left: 14px;
    align-items: center;
    height: 42px;
    color: #515a6e;
    .company-logo{
      width:48px;
    }
    .product-header-content {
      flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
      .department_select{
        position: relative;
        min-width: 60px;
        border-radius: 2px;
        // background: #292A4D;
        transition: background 0.3s ease-in-out;
        &.active{
          background: #383A69;
        }
        .department_name{
          padding: 0 9px;
          padding-right: 26px;
          color: #fff;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .selece_icon{
          position: absolute;
          top: 50%;
          right: 2px;
          margin-top: -6px;
          color: #ffffff;
          transition: transform 0.3s ease-in-out;
          transform-origin: 50% 50%;
        }
      }
      .dep_box{
        position: absolute;
        left: 16px;
        right: 16px;
        top: 42px;
        padding-right:16px;
        background: rgba(255,255,255,0.9);
        border-radius: 4px;
        height: 250px;
        overflow-y: scroll;
        z-index: 9999999;
        -webkit-overflow-scrolling:touch
      }
    }
    .home {
      width: 20px;
      height: 20px;
    }
  }
}
.produce {
  color: #ffffff;
  background: #1c1f37;
  min-height: 100%;
  .produce-tab {
    display: flex;
    // position: fixed;
    z-index: 2;
    height: 44px;
    top: 40px;
    width: 100%;
    align-items: center;
    background: #22233f;
    .produce-tab-item {
      position: relative;
      width: 50%;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 14px;
      &.active {
        color: #456de6;
        background-color: initial;
        .line {
          position: absolute;
          left: 50%;
          bottom: 0;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
          width: 20px;
          height: 3px;
          background: #177fff;
        }
      }
    }
  }
  .produce-add {
    // position: fixed;
    display: flex;
    top: 84px;
    padding-right: 10px;
    width: 100%;
    height: 50px;
    z-index: 2;
    background: #1c1f37;
    justify-content: flex-end;
    align-items: center;
    .add-btn {
      // width: 50px;
      height: 28px;
      padding: 0 16px;
      margin-right: 8px;
      font-size: 13px;
      line-height: 28px;
      border-radius: 4px;
      text-align: center;
      background: rgb(69, 109, 230);
    }
  }
}
.produce-data-list {
  // padding-top:130px;
  padding-left: 10px;
  padding-right: 10px;
  .item {
    position: relative;
    background: #292A4D;
    border-radius: 4px;
    transition: .3s all ease-in-out;
    margin-bottom: 10px;
    &:last-child{
      margin-bottom: 0;
    }
    .top {
      font-size: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 10px;
    }
    .bottom {
      padding: 10px;
      color: rgba(255, 255, 255, 0.6);
      font-size: 15px;
    }
    .status {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 15px;
      &.draft{
        color: #DD9710;
      }
      &.submitted{
        color: #456DE6;
      }
    }
  }
  .no-data {
    padding: 10px;
    text-align: center;
    color: grey;
  }
}
.more{
  height:40px;
  font-size:12px;
  line-height:40px;
  text-align:center;
  color:#456de6;
}
</style>
